<template>
  <div>
    <div id="title">
      <img @click="$router.push('/userInfo')" src="@/assets/img/u57.png" alt="">
      <span class="title-content">编辑资料</span>
    </div>
    <div class="title-ico">
      <img class="user-icon" :src="userInfo.head_img" alt="">
      <van-uploader :after-read="afterRead" class="fileUpload" />
    </div>

    <div id="content">
      <ceil-bar v-for="(item, index) in labels" :key="index" :label="item.name" :desc="item.desc" @gotoPage="gotoEject(item)"></ceil-bar>
    </div>

    <!-- 外部组件 -->
    <van-dialog v-model="show" :title="title" @confirm="sureBtn" show-cancel-button>
      <van-field v-model="value" :placeholder="placeholder" />
    </van-dialog>

    <!-- 上拉菜单组件 -->
    <van-action-sheet v-model="sheetShow" :actions="actions" cancel-text="取消" @select="onSelect" />
  </div>
</template>

<script>
import userApi from '@/api/user'
import { Dialog } from 'vant'
import { Notify } from 'vant'
import { ActionSheet } from 'vant'
import ceilBar from '@/commonComponent/ceilBar'

export default {
  data() {
    return {
      userInfo: {},
      labels: [],
      show: false,
      sheetShow: false,
      value: '',
      title: '',
      placeholder: '',
      itemName: '',
      actions: [
        { name: '男' },
        { name: '女' },
      ]
    }
  },
  created() {
    this.getMyInfo()
  },
  methods: {
    getMyInfo() {
      let id = localStorage.getItem('user_id')
      userApi.getUserInfo(id).then(res => {
        let resp = res.data
        console.log(resp);
        this.userInfo = resp.data
        if (!this.userInfo.head_img) {
          this.userInfo.head_img = '/static/image/u80.png'
        } else {
          this.userInfo.head_img = this.$axios.defaults.baseURL + this.userInfo.head_img
        }
        this.userInfo.gender = this.userInfo.gender == 1 ? '男' : '女'
        this.labels = [
          { name: '昵称', desc: this.userInfo.nickname },
          { name: '密码', desc: '******' },
          { name: '性别', desc: this.userInfo.gender },
        ]
      })
    },
    editUserInfo(id) {
      userApi.editUserInfo(id).then(res => {
        return res.data
      })
    },
    gotoEject(item) {
      if (item.name == '性别') {
        this.sheetShow=true
        return
      }
      this.itemName = item.name
      this.title = `修改${item.name}`
      this.placeholder = `请输入新${item.name}`
      this.show = true
    },
    sureBtn() {
      let id = localStorage.getItem('user_id')
      let obj = ''
      if (this.itemName == '昵称') {
        obj = { nickname: this.value }
      } else if (this.itemName == '密码') {
        obj = { password: this.value }
      }
      userApi.editUserInfo(id, obj).then(res => {
        let resp = res.data
        Notify({ type: 'success', message: resp.message })
        this.getMyInfo()
      })
    },
    afterRead(fileItem) {
      let data = new FormData()
      data.append('file', fileItem.file)

      userApi.uploadFile(data).then(res => {
        console.log(res.data.data.url);
        let id = localStorage.getItem('user_id')
        userApi.editUserInfo(id, { head_img: res.data.data.url }).then(res => {
          console.log(res);
          this.getMyInfo()
        })
      })
    },
    onSelect(item) {
      console.log(item.name );
      userApi.editUserInfo(localStorage.getItem('user_id'), {gender: item.name == '男' ? 1 : 0}).then(res => {
        this.getMyInfo()
        this.sheetShow = false
      })
    }
  },
  components: {
    ceilBar
  }
}
</script>

<style scoped>
#title {
  margin-top: 6vw;
}

#title img {
  position: absolute;
  width: 4vw;
  left: 3.5vw;
  vertical-align: middle;
}

.title-content {
  display: block;
  text-align: center;
  font-size: 4vw;
  font-weight: 700;
  color: #33336a;
}
.title-ico {
  position: relative;
}
.user-icon {
  display: flex;
  width: 22vw;
  height: 22vw;
  margin: 0 auto;
  margin-top: 10vw;
  border-radius: 50%;
}

.fileUpload {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  opacity: 0;
}
.edit {
  width: 5vw;
  margin-right: 3vw;
  vertical-align: middle;
  margin-top: -0.5vw;
  margin-left: 2vw;
}

#content {
  display: flex;
  border-top: 1vw solid #e4e4e4;
  box-sizing: border-box;
  /* padding-left: 5vw; */
  flex-direction: column;
  margin-top: 6vw;
}

#content ul {
  width: 100vw;
  margin-top: 2vw;
}

#content li {
  display: flex;
  width: 100%;
  padding: 5vw 0;
  justify-content: space-between;
  border-bottom: 1px solid #e4e4e4;
}

#content li .my-guanzhu {
  display: flex;
  color: #202020;
}

#content li .right {
  display: flex;
  color: #a1a1ab;
  font-size: 3.5vw;
}
/* /deep/ .van-uploader__input {
  width: 20vw;
  height: 20vw;
} */
</style>
